import Vue from 'vue';
import { PopupManager } from '@/utils/popup';
import GNotification from './g-notification.vue';
import { getSize } from '@/utils/dom'
let NotificationConstructor = Vue.extend( GNotification );

let instance;
let instances = [];
let seed = 1;

var Notification = function ( options ) {
    options = options || {};
    let userOnClose = options.onClose;
    let id = 'notification_' + seed++;

    options.onClose = function () {
        Notification.close( id, userOnClose );
    };

    instance = new NotificationConstructor( {
        data: options
    } );

    instance.id = id;
    instance.vm = instance.$mount();
    document.body.appendChild( instance.vm.$el );
    instance.vm.visible = true;
    instance.dom = instance.vm.$el;
    instance.dom.style.zIndex = PopupManager.nextZIndex();

    const offset = options.offset || 0;
    let topDist = offset;
    for ( let i = 0, len = instances.length; i < len; i++ ) {
        topDist += instances[ i ].$el.offsetHeight + 16;
    }
    topDist += 74;
    instance.top = topDist;
    instances.push( instance );
    return instance.vm;
};

[ 'success', 'warning', 'info', 'error' ].forEach( type => {
    Notification[ type ] = options => {
        if ( typeof options === 'string' ) {
            options = {
                title: options
            };
        }
        options.type = type;
        return Notification( options );
    };
} );

Notification.close = function ( id, userOnClose ) {
    let index;
    let removedHeight;
    for ( var i = 0, len = instances.length; i < len; i++ ) {
        if ( id === instances[ i ].id ) {
            if ( typeof userOnClose === 'function' ) {
                userOnClose( instances[ i ] );
            }
            index = i;
            removedHeight = instances[ i ].dom.offsetHeight;
            instances.splice( i, 1 );
            break;
        }
    }

    if ( len > 1 ) {
        for ( i = index; i < len - 1; i++ ) {
            instances[ i ].dom.style.top = parseInt( instances[ i ].dom.style.top, 10 ) - removedHeight - 16 + 'px';
        }
    }
};

export default Notification;
